<template>
  <div>
    <el-dialog :model-value="props.questionBool" title="题库列表" width="80%" :before-close="queshandleClose">
      <div class="bankList">
        <!-- 表单 -->
        <el-form :inline="true" :model="data" class="demo-form-inline">
                <el-form-item label="试卷名称">
                    <el-input v-model="params.key" placeholder="请输入试卷名称"/>
                </el-form-item>
                <el-form-item label="创建人" value="">
                    <el-input v-model="params.admin" placeholder="请输入创建人昵称"/>
                </el-form-item>
               <div class="button">
                 <el-checkbox
                  v-model="params.ismy"
                  true-label="1"
                  false-label="0"
                  size="large"
                  @change="change"
                 />
                 <span style="padding:0px 10px">只看我创建的</span>
                 <el-button type="primary" @click="Submit">查询</el-button>
               </div>
            </el-form>
            <!-- 题库列表 -->
            <div>
            <el-table :data="Datalist"  style="width: 100%">
              <el-table-column label="题库名称" width="180">
                <template #default="scope">
                  <el-radio-group v-model="radio" class="ml-4" @change="changeRadio(scope.row)">
                    <el-radio :label="scope.row.id" size="large">{{scope.row.title}}</el-radio>
                  </el-radio-group>
                </template>
              </el-table-column>
              <el-table-column prop="counts" label="题目数量" width="180" />
              <el-table-column prop="addtime" label="创建时间" />
              <el-table-column prop="admin" label="创建人" />
            </el-table>
        </div>
        <!-- 题库分页 -->
        <pages
      :total="total"
      :page="params.page"
      :pageSize="params.psize"
      @changePageSize="changePageSize"
      @changePage="changePage"
    />
      </div>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelList">取消</el-button>
        <el-button type="primary" @click="confirm"
           style="font-size:12px">确定</el-button
        >
      </span>
    </template>
    </el-dialog>
    <!-- 点击单选按钮打开试卷列表 -->
    <examList :testlisttionBool="testlisttionBool" v-if="testlisttionBool==true" :id="radioId" :title="title"
    @testlistClose="testlistClose" @testlistCancel="testlistCancel" @testlistConfirm="testlistConfirm"></examList>
  </div>
</template>

<script lang="ts" setup>
import { inject, reactive, ref, toRefs, watch, watchEffect } from 'vue'
import { ElMessage } from 'element-plus'
import {databaseList} from '../../api/subjects'
import pages from '../../components/pages/pages.vue'
import examList from '../../components/textAdmin/examList.vue'

const props: any = defineProps(['questionBool'])  // 父向子
const emit = defineEmits(['queshandleClose','quesConfirm','testlistConfirm'])  //子向父

const queshandleClose = () => { //差号
    emit('queshandleClose', false)
}

const data:any = reactive({
    // 标题名
    Tips:"",
    dialogVisible:false,
    params:{
      // 试卷名称
      key:'',
      // 创建人
      admin:'',
      // 多选框
      ismy:0,
      page:1,
      psize:10
    },
    // 单选框
    radio:'',
    // 题库列表
    Datalist:[],
    // loading效果
    fullscreenLoading:true,
    total:0,
    background:true,
    // 题库列表开关
    is:false,
    // 题库ID
    databaseid:0,
    ids:0,
    arr:[],
    isShow:0,
    testlisttionBool:false,
    radioId:0,
    title:''
})
const {arr,ids,databaseid,background,Tips,dialogVisible,params,Datalist,fullscreenLoading,radio,total,isShow,testlisttionBool,radioId,title}:any = toRefs(data)

// 题库列表
const getdatabaseList = async()=>{
  const res =  await databaseList(params.value)
  console.log(res);
  data.Datalist = res.data.list
  total.value=res.data.counts
}
getdatabaseList()

// 切换分页数据
const changePageSize = (val: number) => {
  console.log('val-pageSize', val);
  params.value.psize = val; //页码
  // 请求列表数据...
  getdatabaseList()
};

const changePage = (val: number) => {
  console.log('val-page', val);
  params.value.page = val; //每页显示多少条
  // 请求列表数据...
  getdatabaseList()
};

// 查询
const Submit = ()=>{
  getdatabaseList()
}

// 只看我创建的
const change=(val:any)=>{
  if(val=='1'){
    params.value.admin=''
  }
}

// 单选框内容改变
const changeRadio =(val:any)=>{
  let {id,title} = val
  console.log(id);
  console.log(title);
  title = title
  ids.value = id
}

// 点击确定时弹出试卷列表
const confirm = ()=>{
  testlisttionBool.value=true
  radioId.value = ids.value
  console.log(radioId.value);
  emit('quesConfirm', false,)
}

// 点击取消时关闭弹窗
const cancelList = ()=>{
  emit('quesConfirm', false,)
}

// 关闭弹窗的方法
const testlistClose = (val:any)=>{
  testlisttionBool.value = val
}

// 取消按钮
let testlistCancel = (val:any) => {
  testlisttionBool.value = val
}
// 确定按钮
let testlistConfirm = (val:any) => {
  testlisttionBool.value = false
  testlisttionBool.value=false
  emit('testlistConfirm', val,)
}
</script>

<style lang="less" scoped>
  .bankList{
    .el-form{
      display: flex;
      .button{
        margin-bottom: 20px;
      }
    }
  }
</style>